<template>
  <div class="container">
    <el-row :gutter="20">
      <el-col :span="16"
        ><h3 class="title location">评论</h3>
        <div
          v-if="replyshow"
          class="replyshow"
          @mouseenter="changeClass"
          @mouseleave="changeClasso"
        >
          <span v-if="parent" style="line-height: 30px; font-size: 13px"
            >回复@{{ parent.account.nickname }}</span
          >
          <i :class="classname" style="cursor: pointer" @click="renew"></i>
        </div>
        <!-- 文本框 -->
        <el-input
          type="textarea"
          :rows="2"
          placeholder="说点什么吧"
          v-model="textarea"
          :autosize="{ minRows: 2, maxRows: 6 }"
          resize="none"
          :autofocus="true"
        >
        </el-input>
        <div class="opt">
          <div>
            <!-- 文件上传 -->
            <el-upload
              ref="file"
              :action="http.defaults.baseURL + '/upload'"
              name="files"
              list-type="picture-card"
              :on-preview="handlePictureCardPreview"
              :on-remove="handleRemove"
              :on-success="handleSuccess"
              :before-upload="handleBeforeupload"
              :limit="2"
              :on-exceed="handleExceed"
            >
              <i class="el-icon-plus"></i>
            </el-upload>
            <el-dialog :visible.sync="dialogVisible">
              <img width="100%" :src="dialogImageUrl" alt="" />
            </el-dialog>
          </div>
          <el-button type="primary" size="small " @click="submitComment"
            >提交</el-button
          >
        </div>
      </el-col>
      <el-col :span="8"></el-col>
    </el-row>
  </div>
</template>

<script>
import http from "@/utils/http";
export default {
  props: {
    parent: {
      default: null,
    },
  },
  data() {
    return {
      replyshow: false,
      classname: "el-icon-close",
      http,
      textarea: "", //文本框
      dialogImageUrl: "", //照片墙
      dialogVisible: false, //照片弹框
      pictureList: [],
    };
  },
  watch: {
    // 监听父组件传来的数据如从null变为{}时
    parent() {
      console.log("子组件代码", this.parent);
      if (this.parent) {
        console.log(this.parent.account.nickname);
        this.replyshow = true;
      }

      // 让当前的元素滚动到浏览器窗口的可视区域内。
      document.querySelector(".location").scrollIntoView();
      // this.requestToo();
    },
  },
  methods: {
    changeClass() {
      this.classname = "el-icon-error";
    },
    changeClasso() {
      this.classname = "el-icon-close";
    },
    // 点击取消事件
    renew() {
      // 弹框隐藏
      this.replyshow = false;
      // 让父组件进行数据置空
      this.$emit("renew");
    },
    // 发布评论请求
    submitComment() {
      // if (this.textarea.length == 0) {
      //   return this.$message.error("请输入评论内容");
      // }
      if (this.textarea.trim().length == 0) {
        return this.$message.error("请输入评论内容");
      }
      this.requestToo();
    },
    // 提交评论--请求数据函数封装
    requestToo() {
      let data = {
        content: this.textarea,
        content: this.textarea,
        pics: this.pictureList,
        post: 4,
      };
      if (this.parent) {
        data.follow = this.parent.id;
      }
      this.$axios({
        method: "post",
        url: "/comments",
        headers: {
          // 请求头传递token  前加 Bearer
          Authorization: "Bearer " + this.$store.state.userstore.userInfo.token,
        },
        data,
      }).then((res) => {
        if (res.data.message == "提交成功") {
          this.$message.success("评论成功");
          // upload 清空已上传的文件列表方法
          this.$refs.file.clearFiles();
          this.textarea = "";
          this.$emit("refreshList");
        }
      });
    },

    gettoken() {
      let token = "Bearer " + this.$store.state.userstore.userInfo.token;
      return { Authorization: token };
    },
    // 照片墙--照片移除时
    handleRemove(file, fileList) {
      console.log(file, fileList);
      this.pictureList = fileList.map((value) => {
        return value.response[0];
      });
    },
    // 照片墙--照片预览时
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible = true;
    },
    // 照片墙--文件上传成功时
    handleSuccess(response, file, fileList) {
      console.log(response, file, fileList);
      this.pictureList = fileList.map((value) => {
        return value.response[0];
      });
    },
    // 照片墙--文件数量超出时
    handleExceed(files, fileList) {
      this.$message.warning("文件数量超出");
    },
    // 文件上传之前
    handleBeforeupload(file) {},
  },
};
</script>

<style lang="less" scoped>
.container {
  width: 1000px;
  margin: 20px auto;

  .title {
    font-size: 24px;
    margin-bottom: 20px;
  }
  .replyshow {
    position: relative;
    width: 157px;
    height: 31px;
    background-color: #f3f0f0;
    border-radius: 3px;
    border: 1px solid #ccc;
    margin-bottom: 5px;
    /deep/ .el-icon-close:before {
      position: absolute;
      right: 12px;
      top: 8px;
    }
    /deep/ .el-icon-error:before {
      position: absolute;
      right: 12px;
      top: 8px;
    }
  }
  .opt {
    display: flex;
    justify-content: space-between;
    /deep/ .el-upload {
      width: 100px;
      height: 100px;
      margin-top: 20px;
    }
    /deep/ .el-upload {
      position: relative;
    }
    /deep/ .el-icon-plus {
      position: absolute;
      top: 50%;
      left: 50%;
      transform: translate(-50%, -50%);
    }
    /deep/ .el-button {
      margin-top: 20px;
      height: 35px;
      width: 65px;
    }
  }
}
</style>